import { nanoid } from "nanoid";
import { cloneDeep } from "lodash-es";
import { ConfigType } from "./index.d";
import { loadFile } from "./utils/helper";

/*
  Record 是泛型工具类型，专门用来定义对象类型的
  接受两个泛型参数：
    第一个泛型参数：是key的类型
    第二个泛型参数：是value的类型
*/

// 动态导入
// 所有物料配置
export const materialModules: Record<string, ConfigType> = import.meta.glob(
  "./components/**/index.ts",
  {
    eager: true, // 不使用懒加载组件
    import: "default", // 引入默认暴露的内容
  }
);

// 所有图片
export const imageModules: Record<string, string> = import.meta.glob(
  "./images/*.png",
  {
    eager: true, // 不使用懒加载组件
    import: "default", // 引入默认暴露的内容
  }
);

// 获取图片函数
export const fetchImage = (name: string) => {
  const images = Object.values(imageModules); // ["/src/materials/images/danger-button.png", ...]
  const imageUrl = images.find((img) => img.includes(name));
  return imageUrl!;
};

// 创建组件配置
export const createComponentConfig = async (config: ConfigType) => {
  // 懒加载 config.ts 文件
  // 因为不是所有组件都可以被渲染（使用），所以懒加载性能更好
  // 缓存
  const configFile = await loadFile(
    config.category,
    config.package,
    "config.ts"
  );

  return {
    // 解决问题：多个组件共享一个props等数据 -> 使用深拷贝
    ...cloneDeep(configFile), // 组件其他配置 -> 组件其他配置
    package: config.package, // 组件名字 -> 找到要渲染组件来渲染
    category: config.category,
    id: nanoid(), // 组件id -> 为了遍历有唯一的key
  };
};

// 全局注册组件 -> index.vue
export const componentInstall = async (config: ConfigType) => {
  // 判断是否全局注册过组件
  if (window.$vue.component(config.package)) return;
  const file = await loadFile(config.category, config.package, "index.vue");
  window.$vue.component(config.package, file);
};
// 全局注册组件 -> config.vue
export const configComponentInstall = async (config: ConfigType) => {
  const componentName = config.package + "Config";
  // 判断是否全局注册过组件
  if (window.$vue.component(componentName)) return;
  const file = await loadFile(config.category, config.package, "config.vue");
  window.$vue.component(componentName, file);
};
